 /*
 * @description: 用户任务反馈列表/查看详情
 * @Author: along
 * @Date: 2021-08-02
 * @Last Modified by:
 * @Last Modified time: 2021-08-02
 */
<template>
    <div
        class="studentFeedBackDetail"
        ref="wrapper"
    >
        <div class="__header">
            <div class="__header_left">
                <p class="__header_title">用户反馈审核</p>
                <p class="__header_content">当前项目: {{ formData.project_title }}</p>
            </div>
            <div class="__header_right">
                <p
                    v-if="status === 0"
                    class="__header_next"
                    @click="handleTaskAutid(1)"
                >通过</p>
                <p
                    v-if="status === 0"
                    class="__header_error"
                    @click="handleTaskAutid(2)"
                >不通过</p>
                <p
                    class="__header_back"
                    @click="() => {
                        this.$router.push({
                            name: 'shopProjectStudentFeedbackList'
                        })
                    }"
                >返回</p>
            </div>
        </div>

        <div class="__wrap">
            <div class="__main">
                <!-- 待审核 -->
                <template v-if="status === 0">
                    <p
                        :style="{color: 'rgba(255, 183, 38, 1)'}"
                        class="__verfy"
                    >{{ 1 | filterVerfy }}</p>
                    <p class="__verfy_tips">商家已提交任务,请尽快审核～</p>
                    <p class="__verfy_time">提交审核时间：{{ formData.submit_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</p>
                    <p
                        class="__verfy_lines"
                        :style="{margin: '24px 0 32px 0'}"
                    />
                </template>

                <!-- 审核通过 -->
                <template v-if="status === 1">
                    <p
                        :style="{color: 'rgba(47, 189, 179, 1)'}"
                        class="__verfy"
                    >{{ 2 | filterVerfy }}</p>
                    <p class="__verfy_tips">审核时间：{{ formData.verify_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</p>
                    <p class="__verfy_time">提交审核时间：{{ formData.submit_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</p>
                    <p
                        class="__verfy_lines"
                        :style="{margin: '24px 0 32px 0'}"
                    />
                </template>

                <!-- 审核不通过 -->
                <template v-if="status === -1">
                    <p
                        :style="{color: 'rgba(249, 91, 86, 1)'}"
                        class="__verfy"
                    >{{ -1 | filterVerfy }}</p>
                    <p class="__verfy_tips">不通过原因：{{ formData.verify_fail_reason ? formData.verify_fail_reason : '--' }}</p>
                    <p class="__verfy_time">审核时间：{{ formData.verify_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</p>
                    <p
                        class="__verfy_lines"
                        :style="{margin: '24px 0 32px 0'}"
                    />
                </template>

                <!-- 基本信息 -->
                <div class="__items">
                    <p class="__items_title">基本信息</p>
                    <div class="__items_wrap">
                        <div class="__items_next">
                            <p class="__items_name">商家名称：</p>
                            <p class="__items_content">{{ formData.company_name | filterVal }}</p>
                        </div>
                        <div class="__items_next">
                            <p class="__items_name require">任务名称：</p>
                            <p class="__items_content">{{ formData.task_title | filterVal }}</p>
                        </div>
                        <div class="__items_next">
                            <p class="__items_name require">任务时间：</p>
                            <p class="__items_content">{{ formData.start_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }} - {{ formData.end_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</p>
                        </div>
                    </div>
                    <div class="__items_wrap">
                        <div class="__items_next">
                            <p class="__items_name require2 padding">任务总数：</p>
                            <p class="__items_content">{{ formData.all_count }}个</p>
                        </div>
                        <div class="__items_next">
                            <p class="__items_name require">单任务奖励：</p>
                            <p class="__items_content">{{ formData.task_price }}元</p>
                        </div>
                        <div class="__items_next">
                            <p class="__items_name require">领取次数：</p>
                            <p class="__items_content">{{ formData.accept_limit_count === -1 ? '不限' : formData.accept_limit_count }}</p>
                        </div>
                    </div>
                    <div class="__items_wrap">
                        <div class="__items_next">
                            <p class="__items_name require2 padding">用户群体：</p>
                            <p class="__items_content">{{ formData.student_limit_stuagent_level | filterVal }}</p>
                        </div>
                    </div>
                    <p
                        class="__verfy_lines"
                        :style="{margin: '0px 0 32px 0'}"
                    />
                </div>

                <!-- 内容信息 -->
                <div
                    class="__items"
                    v-if="!!formData.task_content.length"
                >
                    <p class="__items_title">内容信息</p>
                    <div
                        v-for="(row,index) in formData.task_content"
                        :key="index"
                        class="__items_info"
                    >
                        <!-- 任务介绍 -->
                        <template v-if="row.type == 'task_intro'">
                            <p class="__items_info_name">任务介绍:</p>
                            <p class="__items_info_content">{{ row.value }}</p>
                        </template>
                        <!-- 验收标准 -->
                        <template v-if="row.type == 'task_standard'">
                            <p class="__items_info_name">验收标准:</p>
                            <p class="__items_info_content">{{ row.value }}</p>
                        </template>
                        <!-- 任务步骤 -->
                        <template v-if="row.type == 'guide'">
                            <p class="__items_info_name weight">任务步骤:</p>
                            <div class="__items_guide">
                                <div
                                    v-for="(next, key) in row.value"
                                    :key="key"
                                    class="__items_list"
                                >
                                    <div class="__items_list_nav">
                                        <p class="__items_list_nav_target" />
                                        <p class="__items_list_nav_title">步骤{{ index | filterIndex }}</p>
                                    </div>
                                    <div class="__guide_content">
                                        <p class="__guide_title">步骤内容:</p>
                                        <p class="__guide_desc">{{ next.content }}</p>
                                    </div>
                                    <div class="__guide_content">
                                        <p class="__guide_title">步骤图片:</p>
                                        <div class="__guide_wrap">
                                            <img
                                                v-for="(el,idx) in next.images"
                                                :key="idx"
                                                :src="el"
                                                class="__guide_img"
                                                @click="fnShowPreview(next.images, idx)"
                                            >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <!-- 常见问题 -->
                        <template v-if="row.type == 'faq'">
                            <p class="__items_info_name">常见问题:</p>
                            <div class="__items_guide">
                                <div
                                    v-for="(next,key) in row.value"
                                    :key="key"
                                    class="__items_list"
                                >
                                    <div class="__items_list_nav">
                                        <p class="__items_list_nav_target" />
                                        <p class="__items_list_nav_title">常见问题{{ index + 1 }}: {{ next.title }}</p>
                                    </div>
                                    <p class="__items_list_content">{{ next.desc }}</p>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            <!-- 反馈内容 -->
            <div class="__feek">
                <p class="__feek_title">反馈内容</p>
                <div class="__feek_wrap">
                    <div
                        v-if="form_config_with_data.length"
                        class="__content"
                    >
                        <div
                            v-for="(row,index) in form_config_with_data"
                            :key="index"
                            class="__side"
                        >
                            <!-- text -->
                            <template v-if="row.type === 1">
                                <div class="__side_title">
                                    {{ index + 1 }}、{{ row.title }}
                                </div>
                                <div class="__side_content">
                                    {{ row.default.value }}
                                </div>
                            </template>

                            <!-- textarea -->
                            <template v-if="row.type === 6">
                                <div class="__side_title">
                                    {{ index + 1 }}、{{ row.title }}
                                </div>
                                <div class="__side_content">
                                    {{ row.default.value }}
                                </div>
                            </template>

                            <!-- radio -->
                            <template v-if="row.type === 2">
                                <div class="__side_title">
                                    {{ index + 1 }}、{{ row.title }}
                                </div>
                                <div class="__side_radio">
                                    <el-radio-group v-model="row.default.value">
                                        <el-radio
                                            v-for="(el,idx) in row.options"
                                            :key="idx"
                                            :label="el.value"
                                        >
                                            {{ el.title }}
                                            <el-input
                                                v-if="el.option_type == 2"
                                                v-model="el.default_edit_content"
                                                size="small"
                                                :disabled="true"
                                            />
                                        </el-radio>
                                    </el-radio-group>
                                </div>
                            </template>

                            <!-- checkbox -->
                            <template v-if="row.type === 3">
                                <div class="__side_title">
                                    {{ index + 1 }}、{{ row.title }}
                                </div>
                                <div class="__side_radio">
                                    <el-checkbox
                                        v-for="(el,idx) in row.options"
                                        :key="idx"
                                        :label="true"
                                        v-model="el.default_selected"
                                    >
                                        {{ el.title }}
                                        <el-input
                                            v-if="el.option_type == 2"
                                            v-model="el.default_edit_content"
                                            size="small"
                                            :disabled="true"
                                        />
                                    </el-checkbox>
                                </div>
                            </template>

                            <!-- images -->
                            <template v-if="row.type === 5">
                                <div class="__side_title">
                                    {{ index + 1 }}、{{ row.title }}
                                </div>
                                <div class="__side_images">
                                    <img
                                        v-for="(el,idx) in row.default.value"
                                        :key="idx"
                                        :src="el.value"
                                        class="__side_images_next"
                                    >
                                </div>
                            </template>

                            <!-- video -->
                            <template v-if="row.type === 9">
                                <div class="__side_title">
                                    {{ index + 1 }}、{{ row.title }}
                                </div>
                                <div class="__side_images">
                                    <div
                                        v-for="(el,idx) in row.default.value"
                                        :key="idx"
                                        class="video-item-cover"
                                        :style="{backgroundImage: `url(${el.video_cover_url})`}"
                                        @click="previewVideo(el.video_url)"
                                    >
                                        <img src="@/assets/image/video-play.png">
                                    </div>
                                    <!-- <video
                                        v-for="(el,idx) in row.default.value"
                                        :key="idx"
                                        width="60"
                                        height="60"
                                        :controls="false"
                                        :poster="el.video_cover_url"
                                    >
                                        <source
                                            :src="el.video_url"
                                            type="video/mp4"
                                        >
                                    </video> -->
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="__footer">
                <template v-if="status === 0">
                    <el-button
                        size="medium"
                        :style="{width: '120px', marginRight: '36px'}"
                        type="default"
                        @click="handleTaskAutid(2)"
                    >
                        不通过
                    </el-button>
                    <el-button
                        size="medium"
                        :style="{width: '120px'}"
                        type="primary"
                        @click="handleTaskAutid(1)"
                    >
                        通过
                    </el-button>
                </template>
                <el-button
                    v-else
                    size="medium"
                    :style="{width: '120px'}"
                    type="default"
                    @click="() => {
                        this.$router.push({
                            name: 'shopProjectStudentFeedbackList'
                        })
                    }"
                >
                    返回
                </el-button>
            </div>
        </div>

        <!-- 图片预览 -->
        <img-preview ref="preview" />

        <!-- 审核通过弹窗 -->
        <show-dialog
            ref="showDialog"
            :dialog="showDialog"
            :width="360"
            :cancel-text="'取消'"
            :confirm-text="'确认'"
            :title="'温馨提示'"
            :content="'是否确认通过该任务的审核?'"
            @close="showDialog = false"
            @emit="emitFun"
        />

        <!-- 审核驳回 -->
        <reject-dialog
            ref="rejectDialog"
            :visible.sync="rejectDialog"
            placeholder="请输入不通过原因..."
            :maxlength="100"
            @confirm="handleVerify('reject', $event)"
        />

        <!-- 视频播放组件 -->
        <video-simple
            ref="videoSimple"
            :url="video_url"
            :top="54"
            :left="left"
        />
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import merge from 'webpack-merge';
import imgPreview from '@/components/common/img-preview';
import showDialog from '@/components/common/dialog.vue';
import RejectDialog from "@/components/dialog/reject-dialog";
import VideoSimple from "@/components/dorm/video-simple";
export default {
    mixins: [back],
    components: {
        imgPreview,
        showDialog,
        RejectDialog,
        VideoSimple
    },
    data() {
        return {
            no: '',
            status: 0,
            task_no: '',
            formData: {
                company_name: '',
                task_title: '',
                start_name: '',
                end_time: '',
                all_count: 0,
                task_price: 0.00,
                accept_limit_count: -1,
                student_limit_stuagent_level: '',
                project_title: '',
                verify: -1,
                submit_time: 0,
                verify_time: 0,
                verify_fail_reason: '',
                task_content: []
            },
            form_config_with_data: [
                // {
                //     "title": "描述你最喜欢去的地方有哪些?",
                //     "type": 1,
                //     "classes": [
                //         "TextConfig"
                //     ],
                //     "name": "96d8a03b",
                //     "options": [],
                //     "required": 1,
                //     "value_type": 1,
                //     "value_length_min": -1,
                //     "value_length_max": -1,
                //     "value_validation_type": 0,
                //     "value_validation_rule": "",
                //     "disabled": 0,
                //     "hint": "",
                //     "default": {
                //         "value_type": 1,
                //         "value": "上海，南京，北京，拉萨，云南等等地方"
                //     }
                // },
                // {
                //     "title": "你喜欢吃哪些东西，字数不少于300字。",
                //     "type": 6,
                //     "classes": [
                //         "TextareaConfig"
                //     ],
                //     "name": "d8650be5",
                //     "options": [],
                //     "required": 1,
                //     "value_type": 1,
                //     "value_length_min": -1,
                //     "value_length_max": -1,
                //     "value_validation_type": 0,
                //     "value_validation_rule": "",
                //     "disabled": 0,
                //     "hint": "",
                //     "default": {
                //         "value_type": 1,
                //         "value": "喜欢吃好吃的东西，吃viki. 喜欢吃好吃的东西，吃viki. 喜欢吃好吃的东西，吃viki. 喜欢吃好吃的东西，吃viki."
                //     }
                // },
                // {
                //     "title": "宇宙是如何诞生的？",
                //     "type": 2,
                //     "classes": [
                //         "RadioConfig"
                //     ],
                //     "name": "9a87df3d",
                //     "options": [
                //         {
                //             "option_type": 1,
                //             "title": "奇点爆炸",
                //             "value": "7449412e",
                //             "default_selected": false,
                //             "default_edit_content": ""
                //         },
                //         {
                //             "option_type": 1,
                //             "title": "由神创建的",
                //             "value": "ba84c398",
                //             "default_selected": false,
                //             "default_edit_content": ""
                //         },
                //         {
                //             "option_type": 1,
                //             "title": "程序构建",
                //             "value": "205989e6",
                //             "default_selected": false,
                //             "default_edit_content": ""
                //         },
                //         {
                //             "option_type": 2,
                //             "title": "其他",
                //             "value": "f181dc74",
                //             "default_selected": true,
                //             "default_edit_content": "不知道啊啊啊啊啊啊"
                //         }
                //     ],
                //     "required": 1,
                //     "value_type": 1,
                //     "value_length_min": -1,
                //     "value_length_max": -1,
                //     "value_validation_type": 0,
                //     "value_validation_rule": "",
                //     "disabled": 1,
                //     "hint": "",
                //     "default": {
                //         "value_type": 3,
                //         "value": "f181dc74",
                //         "edit_content": "不知道啊啊啊啊啊啊"
                //     }
                // },
                // {
                //     "title": "你喜欢吃哪些水果？",
                //     "type": 3,
                //     "classes": [
                //         "CheckboxConfig"
                //     ],
                //     "name": "9e2d7aab",
                //     "options": [
                //         {
                //             "option_type": 1,
                //             "title": "香蕉",
                //             "value": "2e3ac947",
                //             "default_selected": true,
                //             "default_edit_content": ""
                //         },
                //         {
                //             "option_type": 1,
                //             "title": "苹果",
                //             "value": "ad43df05",
                //             "default_selected": false,
                //             "default_edit_content": ""
                //         },
                //         {
                //             "option_type": 1,
                //             "title": "榴莲",
                //             "value": "0929beaf",
                //             "default_selected": false,
                //             "default_edit_content": ""
                //         },
                //         {
                //             "option_type": 1,
                //             "title": "波洛",
                //             "value": "18e08098",
                //             "default_selected": true,
                //             "default_edit_content": ""
                //         },
                //         {
                //             "option_type": 2,
                //             "title": "其他",
                //             "value": "34c53b13",
                //             "default_selected": true,
                //             "default_edit_content": "哈哈哈哈哈哈嗝"
                //         }
                //     ],
                //     "required": 1,
                //     "value_type": 2,
                //     "value_length_min": -1,
                //     "value_length_max": -1,
                //     "value_validation_type": 0,
                //     "value_validation_rule": "",
                //     "disabled": 1,
                //     "hint": "",
                //     "default": {
                //         "value_type": 2,
                //         "value": [
                //             {
                //                 "value_type": 1,
                //                 "value": "2e3ac947"
                //             },
                //             {
                //                 "value_type": 1,
                //                 "value": "18e08098"
                //             },
                //             {
                //                 "value_type": 3,
                //                 "value": "34c53b13",
                //                 "edit_content": "哈哈哈哈哈哈嗝"
                //             }
                //         ]
                //     }
                // },
                // {
                //     "title": "这是哥图片",
                //     "type": 5,
                //     "classes": [
                //         "ImgConfig"
                //     ],
                //     "name": "bed87b62",
                //     "options": [],
                //     "required": 1,
                //     "value_type": 2,
                //     "value_length_min": 1,
                //     "value_length_max": 9,
                //     "value_validation_type": 0,
                //     "value_validation_rule": "",
                //     "disabled": 0,
                //     "hint": "",
                //     "default": {
                //         "value_type": 2,
                //         "value": [
                //             {
                //                 "value_type": 1,
                //                 "value": "http://pic.wxhand.com/dev/student_image/1b0600c77d4c5bab2d899e92e9b08e20"
                //             }
                //         ]
                //     }
                // },
                // {
                //     "title": "这是个视频",
                //     "type": 9,
                //     "classes": [
                //         "VideoConfig"
                //     ],
                //     "name": "a3d2b2c9",
                //     "options": [],
                //     "required": 1,
                //     "value_type": 2,
                //     "value_length_min": -1,
                //     "value_length_max": 3,
                //     "value_validation_type": 0,
                //     "value_validation_rule": "",
                //     "disabled": 0,
                //     "hint": "",
                //     "default": {
                //         "value_type": 2,
                //         "value": [
                //             {
                //                 "value_type": 4,
                //                 "value": "/work/20200630/1125/156c62e9f56bf2d7b667e4c425bf5f32.mov",
                //                 "video_cover_url": "",
                //                 "video_url": "http://dl.zsdx.cn/course/20190823/1136/9717c2a268b3edb3d680ea8b7b45688b.mp4?_upt=17a7bee01627977806"
                //             }
                //         ]
                //     }
                // }
            ],
            showDialog: false,
            rejectDialog: false,
            // 视频预览
            video_url: '',
            left: 0,
        };
    },
    mounted () {
        this.init();
    },
    filters: {
        filterVerfy (val) {
            if(val === 1) return '待审核';
            if(val === 2) return '审核通过';
            if(val === -1) return '审核不通过';
        },
        filterIndex (val) {
            return {0: '一', 1: '二',2: '三',3: '四',4: '五',5: '六',6: '七',7: '八',8: '九',9: '十',10: '十一',11: '十二',12: '十三',13: '十四',14: '十五',15: '十六',16: '十七',17: '十八', }[val];
        },
        filterVal (val) {
            if(val) return val;
            return '--';
        }
    },
    methods: {
        /**
         * @description 初始化页面数据
         */
        init () {
            this.status = Number(this.$route.query.status);
            this.no = this.$route.query.no ? this.$route.query.no : '';
            this.task_no = this.$route.query.task_no ? this.$route.query.task_no : '';
            this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '工作'},{title: '商家远程项目'},{title: '用户反馈列表', path: '/student/shop-project-student-feedback-list'},{title: '审核'}]);
            this.authResult = this.$route.meta.authResult;

            if(!!this.no) {
                this.getInfo();
            }
        },

        /**
         * @description 获取详情数据
         */
        getInfo () {
            this.$post('/student/task_stuagent_for_shop%5Cget_receive_detail', {
                apply_no: this.no,
                task_no: this.task_no
            }, resp => {
                if (resp.code === 1) {
                    this.formData = {
                        ...resp.data
                    };

                    const page_config = resp.data.task_content.reduce((cur,next) => {
                        if(next.type == 'guide') {
                            cur.push({
                                type: 'guide',
                                value: [{
                                    content: '',
                                    images: []
                                }]
                            });
                        } else if (next.type == 'faq') {
                            cur.push({
                                type: 'faq',
                                value: [{
                                    title: '',
                                    desc: ''
                                }]
                            });
                        } else {
                            cur.push({
                                type: next.type,
                                value: next.value
                            });
                        }

                        return cur;
                    }, []);

                    this.$set(this.formData, 'task_content', page_config);

                    this.form_config_with_data = resp.data.submit_config;
                } else {
                    this.$notify({
                        type: 'warning',
                        message: resp.msg,
                        title: '提示'
                    });
                }
            });
        },

        /**
         * @description 打开审核弹窗
         *      type: 1 通过
         *      type: 2 不通过
         */
        handleTaskAutid (type) {
            if(type === 1) {
                this.showDialog = true;
            } else if (type === 2) {
                this.rejectDialog = true;
            }
        },

        /**
         * @description 确定通过审核
         */
        emitFun () {
            this.$post('/student/task_stuagent_for_shop%5Creceive_audit', {
                apply_no: this.no,
                verify: 1,
                verify_fail_reason: ''
            }, resp => {
                if (resp.code === 1) {
                    this.getInfo();

                    this.$router.push({
                        query:merge(this.$route.query,{'status': 1})
                    }, () => {
                        console.log('123');
                        this.status = Number(this.$route.query.status);
                    });
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        type: 'warning',
                        message: resp.msg,
                        title: '提示'
                    });
                }
            });
        },

        /**
         * @description 审核不通过
         */
        handleVerify (a, b) {
            this.$post('/student/task_stuagent_for_shop%5Creceive_audit', {
                apply_no: this.no,
                verify: -1,
                verify_fail_reason: b
            }, resp => {
                if (resp.code === 1) {
                    this.getInfo();
                    this.$router.push({
                        query:merge(this.$route.query,{'status': -1})
                    }, () => {
                        this.status = Number(this.$route.query.status);
                    });
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        type: 'warning',
                        message: resp.msg,
                        title: '提示'
                    });
                }
            });
        },

        /**
         * 查看视频
         * @param url
         */
        previewVideo(url) {
            this.video_url = url;
            this.left = this.$refs.wrapper.clientWidth - 300;
            this.$refs.videoSimple.showVideo();
        },

        /**
         * @description 查看图片
         * @param   {String}    images    单图预览
         * @param   {Array}     images     多图预览
         */
        fnShowPreview(images, index) {
            if(images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$notify({
                    title: '提示',
                    message: '图片类型错误',
                    type: 'warning',
                    duration: 2000
                });
            }
        },
    }
};
</script>

<style scoped lang="less">
.studentFeedBackDetail {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    margin: 12px;
    width: calc(100% - 24px);
    .__header {
        width: 100%;
        height: 65px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        border-bottom: 1px rgba(240, 242, 245, 1) solid;
        .__header_left {
            height: 65px;
            display: flex;
            align-items: flex-start;
            margin-left: 24px;
            .__header_title {
                color: rgba(51, 51, 51, 1);
                font-size: 18px;
                font-weight: 500;
                margin-top: 24px;
                margin-right: 12px;
            }
            .__header_content {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                white-space: nowrap;
                margin-top: 28px;
            }
        }
        .__header_right {
            display: flex;
            align-items: center;
            .__header_next {
                color: rgba(32, 160, 255, 1);
                font-size: 14px;
                cursor: pointer;
                font-weight: 500;
            }
            .__header_error {
                width: 90px;
                height: 48px;
                text-align: center;
                line-height: 48px;
                color: rgba(245, 51, 65, 1);
                font-size: 14px;
                font-weight: 500;
                border-left: 1px rgba(240, 242, 245, 1) solid;
                border-right: 1px rgba(240, 242, 245, 1) solid;
                margin: 0 24px;
                cursor: pointer;
            }
            .__header_back {
                color: rgba(102, 102, 102, 1);
                font-size: 14px;
                cursor: pointer;
                font-weight: 500;
                margin-right: 24px;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
    .__wrap {
        width: 100%;
        margin: 24px 0px 0px 0px;
        padding: 0 56px;
        box-sizing: border-box;
        flex: 1;
        // padding-bottom: 20px;
        margin-top: 65px;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 3px;
        }
        .__main {
            width: 100%;
            display: flex;
            flex: 1;
            border-bottom: 1px rgba(233, 233, 233, 1) solid;
            overflow: hidden;
            flex-direction: column;
            justify-content: flex-start;
            .__verfy {
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 12px;
            }
            .__verfy_tips {
                color: rgba(153, 153, 153, 1);
                font-size: 12px;
                white-space: nowrap;
            }
            .__verfy_time {
                color: rgba(153, 153, 153, 1);
                font-size: 12px;
                white-space: nowrap;
                margin-top: 12px;
            }
            .__verfy_lines {
                width: 100%;
                height: 1px;
                background-color: rgba(240, 242, 245, 1);
            }
            // 基本信息
            .__items {
                display: flex;
                flex-direction: column;
                .__items_title {
                    color: rgba(51, 51, 51, 1);
                    font-size: 16px;
                    font-weight: 600;
                    margin-bottom: 24px;
                }
                .__items_wrap {
                    display: flex;
                    width: 100%;
                    margin-bottom: 24px;
                    align-items: center;
                    width: 100%;
                    .__items_next {
                        display: flex;
                        align-items: center;
                        width: calc(100% / 3);
                        justify-content: flex-start;
                        .__items_name {
                            color: rgba(85, 85, 85, 1);
                            font-size: 14px;
                            white-space: nowrap;
                        }
                        .require {
                            position: relative;
                            &::before {
                                content: '*';
                                position: absolute;
                                left: -7px;
                                top: -1px;
                                color: rgba(249, 91, 86, 1);
                                font-size: 14px;
                            }
                        }
                        .require2 {
                            position: relative;
                            &::before {
                                content: '*';
                                position: absolute;
                                left: 0px;
                                top: -1px;
                                color: rgba(249, 91, 86, 1);
                                font-size: 14px;
                            }
                        }
                        .padding {
                            padding-left: 8px;
                        }
                        .__items_content {
                            color: rgba(153, 153, 153, 1);
                            font-size: 14px;
                            white-space: nowrap;
                            width: 224px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }

                // 内容信息
                .__items_info {
                    display: flex;
                    align-items: flex-start;
                    margin-bottom: 24px;
                    .__items_info_name {
                        color: rgba(85, 85, 85, 1);
                        font-size: 14px;
                        position: relative;
                        white-space: nowrap;
                        line-height: 24px;
                        margin-right: 10px;
                    }
                    .__items_info_content {
                        font-size: 14px;
                        color: rgba(153, 153, 153, 1);
                        line-height: 24px;
                        width: 596px;
                    }
                    .weight {
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                        font-weight: 500;
                        white-space: nowrap;
                        margin-right: 10px;
                    }
                    .__items_guide {
                        width: 100%;
                        display: flex;
                        box-sizing: border-box;
                        flex-direction: column;
                        padding: 24px 44px;
                        background-color: rgba(251, 251, 251, 1);
                        padding-bottom: 0px;
                        .__items_list {
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            margin-bottom: 10px;
                            .__items_list_nav {
                                display: flex;
                                align-items: center;
                                margin-bottom: 21px;
                                .__items_list_nav_target {
                                    width: 10px;
                                    height: 10px;
                                    border-radius: 50%;
                                    background: rgba(194, 194, 194, 1);
                                    margin-right: 12px;
                                }
                                .__items_list_nav_title {
                                    color: rgba(85, 85, 85, 1);
                                    font-size: 14px;
                                    font-weight: 500;
                                }
                            }
                            .__items_list_content {
                                color: rgba(153, 153, 153, 1);
                                font-size: 14px;
                                line-height: 24px;
                                margin-left: 98px;
                                margin-bottom: 12px;
                            }
                            .__guide_content {
                                width: 750px;
                                margin-left: 22px;
                                display: flex;
                                align-items: flex-start;
                                margin-bottom: 24px;
                                .__guide_title {
                                    color: rgba(85, 85, 85, 1);
                                    font-size: 14px;
                                    white-space: nowrap;
                                    margin-right: 4px;
                                    line-height: 24px;
                                }
                                .__guide_desc {
                                    color: rgba(153, 153, 153, 1);
                                    font-size: 14px;
                                    line-height: 24px;
                                }
                                .__guide_wrap {
                                    width: 686px;
                                    display: flex;
                                    flex-wrap: wrap;
                                    .__guide_img {
                                        width: 102px;
                                        height: 102px;
                                        border-radius: 4px;
                                        margin-right: 12px;
                                        margin-bottom: 12px;
                                        cursor: pointer;
                                    }
                                }
                            }
                        }
                        .__items_list:last-child {
                            margin-bottom: 0px;
                        }
                    }
                }
            }
        }

        // 反馈内容
        .__feek {
            width: 100%;
            display: flex;
            flex-direction: column;
            .__feek_title {
                color: rgba(51, 51, 51, 1);
                font-size: 16px;
                font-weight: 600;
                margin: 32px 0 24px 0;
            }
            .__feek_wrap {
                margin-left: 70px;
                background-color: rgba(251, 251, 251, 1);
                border-radius: 2px;
                box-sizing: border-box;
                padding: 32px 66px;
                .__content {
                    display: flex;
                    flex-direction: column;
                    .__side {
                        display: flex;
                        flex-direction: column;
                        margin-bottom: 22px;
                        .__side_title {
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            font-weight: 500;
                            white-space: nowrap;
                        }
                        .__side_content {
                            color: rgba(102, 102, 102, 1);
                            font-size: 14px;
                            line-height: 24px;
                            margin: 12px 24px;
                        }
                        .__side_radio {
                            display: flex;
                            align-items: center;
                            flex-wrap: wrap;
                            margin: 12px 24px;
                        }
                        .__side_images {
                            height: 60px;
                            display: flex;
                            align-items: center;
                            margin: 12px 24px;
                            .__side_images_next {
                                width: 60px;
                                height: 60px;
                                margin-right: 18px;
                                border-radius: 2px;
                            }
                            .video-item-cover {
                                width: 60px;
                                height: 60px;
                                background-position: center;
                                background-size: cover;
                                background-repeat: no-repeat;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                cursor: pointer;
                                img {
                                    width: 20px;
                                }
                            }
                        }
                    }
                }
            }
        }
        .__footer {
            display: flex;
            align-items: center;
            height: 100px;
        }
    }
}
</style>

<style scoped>
/* .studentFeedBackDetail {} */
</style>
